<template>
  <div id="login" :style="background">
    <el-page-header @back="goBack" content="管理员登录">
    </el-page-header>
      <el-form label-width="80px">
        <div class="div-input">
          <el-form-item>
            <el-input v-model="name" prefix-icon="el-icon-user-solid" placeholder="请输入用户名">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input type="password" v-model="password" prefix-icon="el-icon-key" placeholder="请输入密码">
            </el-input>
          </el-form-item>
        </div>

        <el-form-item>
          <el-switch
              v-model="value"
              active-text="记住我"
              active-color="blue"
              inactive-color="grey">
          </el-switch>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" round @click="userLogin">登录</el-button>
        </el-form-item>
        <el-link type="primary" href="/register">成为管理员？注册</el-link>

      </el-form>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      name: '',
      password: '',

      value: true,

      background: {
        backgroundImage: 'url(' + require('../assets/images/animals/animal1.jpeg') + ')',
        backgroundRepeat: 'no-repeat',
        position: 'fixed',
        backgroundSize: '100% 100%',
        width: '100%',
        height: '100%'
      }
    };
  },
  methods: {
    goBack() {
      history.go(-1);
    },
    userLogin() {
      this.$http.get("/admin/login?name="+this.name+"&password="+this.password).then((response)=>{
        if(response.data.code){
          this.$message({
            showClose: true,
            message: '登录成功！欢迎您！'+response.data.extend.admin.name,
            type: 'success'
          });
          this.$router.push('/console/index');
        }
        else{
          this.$message({
            showClose: true,
            message: '用户名或密码错误！登录失败！',
            type: 'error'
          });
        }
      });

    }
  }
}
</script>

<style scoped>
.el-form{
  border: 1px solid #4e4646;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 400px;
  height: 350px;
  margin: 80px 750px;

}

.div-input{
  margin-top: 50px;
}
.el-form-item{
  width: 300px;
  margin-left: 30px;
}

.el-link{
  margin-left: 250px;
}
</style>